@include b(chat-input) {
  display: flex;
  align-items: center;
  border: 1px solid #{getCssVar('ai-chat', 'border-color')};
  border-radius: #{getCssVar('ai-chat', 'border-radius')};

  @include e(textarea) {
    flex-grow: 1;
    max-height: 6em;
    overflow: hidden auto !important;
    font-size: 16px;
    resize: none;
    background-color: #{getCssVar('ai-chat', 'background-color')};
    border: none;
    outline: none;

    // 设置滚动条样式
    &::-webkit-scrollbar {
      width: 6px;
    }

    // 滚动条轨道
    &::-webkit-scrollbar-thumb {
      // 设置滚动条颜色
      background-color: #ccc;
      border-radius: #{getCssVar('ai-chat', 'border-radius')};
    }
  }
}

@keyframes loading-change {
  0% {
    opacity: 1;
  }

  25% {
    opacity: 0.5;
  }

  50% {
    opacity: 0.1;
  }

  75% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

@include b(chat-input-action-wrapper) {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px;
  color: #{getCssVar('ai-chat', 'color')};

  @include e(action-item) {
    padding: 3px;
    font-size: 12px;
    border-radius: #{getCssVar('ai-chat', 'border-radius')};

    &:hover {
      color: #{getCssVar('ai-chat', 'hover-color')};
      cursor: pointer;
      background-color: #{getCssVar('ai-chat', 'hover-background-color')};
    }

    @include when(disabled) {
      color: #{getCssVar('ai-chat', 'disabled-color')};
      pointer-events: none;
    }

    @include when(loading) {
      pointer-events: none;
      animation: loading-change .8s infinite;
    }
  }
}
